
.sp-img-picker{

    position: relative;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;

    &-item{
        position: absolute;
        top: 50%;
        width: 100%;
        height: 100%;
        border-radius: 0.08rem;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        overflow: hidden;

    }

    &__flexbox{
        display: flex;
        padding: 0.1rem;
        overflow: hidden;
        box-sizing: border-box;

        &-item{
            
            position: relative;
            margin-left: 0.1rem; 
            width:150px;
            height:150px;
            box-sizing: border-box;

            .choose-btn{
                display: -webkit-flex;
                display: -webkit-box;
                display: flex;
                -webkit-justify-content: center;
                -webkit-box-pack: center;
                justify-content: center;
                -webkit-align-items: center;
                -webkit-box-align: center;
                align-items: center;
                font-size: 0;
                box-sizing: border-box;
                border-top: 1PX #d6e4ef solid;
                border-bottom: 1PX #d6e4ef solid;
                border-right: 1PX #d6e4ef solid;
                border-left: 1PX #d6e4ef solid;

                .add-bar{
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    display: inline-block;
                    width: 0.6rem;
                    height: 2PX;
                    border-radius: 1PX;
                    background: #CCC;

                    &:nth-child(1){
                        transform: translate3d(-50%, -50%, 0) rotate(90deg);
                    }
                    &:nth-child(2){
                        transform: translate3d(-50%, -50%, 0) rotate(0);
                    }
                }
            }
        }
    }

    .picker{
        
    }
}